<template>
    <div class="an-login" v-bind:style="{ height: docmHeight+ 'px'}">
      <!--<div class="an-logo">
        <x-icon type="bug" class="icon-white" size="120"></x-icon>
      </div>-->
      <div class="an-form">
        <group class="an-formtxt">
          <x-input placeholder="用户名" v-model.trim="loginForm.username"></x-input>
          <x-input placeholder="密码" type="password" v-model.trim="loginForm.password" show-clear></x-input>
        </group>
        <box gap="10px 10px">
          <x-button class="an-btn" @click.native="submitlogin">
            登录
          </x-button>
          <div class="an-btn-link">
            <a @click="registerUser">注册</a>
          </div>
        </box>
        <div v-transfer-dom>
          <loading :show="loading" text=""></loading>
        </div>
      </div>
    </div>
</template>

<script>
  import { Group, Box,  XInput, XButton, Toast, Loading, TransferDomDirective as TransferDom } from 'vux'
    export default {
      name: "index",
      directives: {
        TransferDom
      },
      components: {
        Group,
        Box,
        XInput,
        XButton,
        Toast,
        Loading
      },
      data(){
        return {
          loginForm:{
            username:'',
            password:''
          },
          loading: false,
          redirect: undefined,
          docmHeight:'',  //默认屏幕高度
        }
      },
      mounted() {
        //默认屏幕高度
        this.docmHeight= document.documentElement.clientHeight;
      },
      methods: {
        submitlogin:function () {
          if(this.loginForm.username == "" || this.loginForm.password == ''){
            this.$vux.toast.text('用户名或密码不能为空！', 'top')
          }else{
            this.loading = true;
            this.$store.dispatch('Login', this.loginForm).then((res) => {
              let nd = res.result;
              this.loading = false;
              if(nd == '0'){
                this.$vux.toast.text('用户名或密码错误！', 'top')
              }else{
                this.$router.push({ path: '/' });
              }

            }).catch(() => {
              this.loading = false
            })
          }
        },
        registerUser(){
          this.$router.push({ path: '/register' })
        }
      }
    }
</script>

<style lang="less" >
  .an-login{
    width: 100%;
    display: table;
    background:url(../../assets/img/login_bg.jpg)no-repeat;
    background-size:100% 100%;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale');
    .an-logo{
      position: absolute;
      top:60px;
      left: 50%;
      margin-left: -60px;
      color: #ffffff;
      img{
        width: 120px;
      }
    }
    .an-form{
      display: table-cell;
      vertical-align: middle;
      padding: 0 20px;
      .an-formtxt{
         margin-bottom: 40px;
      }
    }
    .weui-cells{
      margin-top: 0;
      color: #ffffff;
      background: transparent;
      &:before{
        border-top: none;
      }
      &:after{
        border-bottom: none;
      }
      .weui-cell{
        &:first-child{
          &:before{
            display: block;
          }
        }
        &:before{
          top:auto;
          bottom: 0;
          right: 15px;
        }
      }
    }
    .an-btn{
      border: 1px solid #D9D9D9;
      background: transparent;
      color: #ffffff;
      margin-bottom: 15px;
    }
  }
</style>

